<template>
  <div class="aui-card--fill scroll-box card-box">
    <div class="mod-sys__menu pane-shell">
      <el-form :inline="true"
               :model="dataForm"
               class="align-right"
               @keyup.enter.native="getDataList()">
        <el-form-item>
          <el-button type="primary"
                     @click="incomingSettings()">外部链接设置</el-button>
          <el-button type="primary"
                     plain
                     icon="el-icon-plus"
                     v-if="$hasPermission('system:sysPermission:addPermission')"
                     @click="updateHandle()">{{ $t('add') }}菜单</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="dataListLoading"
                :data="dataList"
                border
                style="width: 100%;height: 100%">
        <table-tree-column prop="name"
                           :label="$t('menu.name')"
                           header-align="center"
                           width="150"></table-tree-column>
        <el-table-column prop="usePort"
                         label="应用端"
                         header-align="center"
                         align="center"
                         width="100"
                         :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span v-if="scope.row.usePort === 0">PC端</span>
            <!-- <span v-if="scope.row.usePort === 1">Pad端</span> -->
            <span v-if="scope.row.usePort === 2">APP端</span>
          </template>
        </el-table-column>
        <el-table-column prop="icon"
                         :label="$t('menu.icon')"
                         header-align="center"
                         width="70"
                         align="center">
          <template slot-scope="scope">
            <svg class="icon-svg"
                 aria-hidden="true">
              <use :xlink:href="`#${scope.row.icon}`"></use>
            </svg>
          </template>
        </el-table-column>
        <el-table-column prop="type"
                         :label="$t('menu.type')"
                         header-align="center"
                         width="80"
                         align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.type === '0'">板块</span>
            <span v-if="scope.row.type === '1'">模块</span>
            <span v-if="scope.row.type === '2'">功能</span>
            <span v-if="scope.row.type === '3'">外部链接</span>
            <span v-if="scope.row.type === '4'">临时图片</span>
          </template>
        </el-table-column>
        <el-table-column prop="sort"
                         :label="$t('menu.sort')"
                         header-align="center"
                         width="80"
                         align="center"></el-table-column>
        <el-table-column prop="isShow"
                         label="是否显示"
                         header-align="center"
                         width="80"
                         align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.isShow === '1' ? '是' : '否' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="url"
                         :label="$t('menu.url')"
                         header-align="center"
                         align="center"
                         width="150"
                         :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="identification"
                         label="标识符"
                         header-align="center"
                         align="center"
                         :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="createName"
                         label="创建人"
                         header-align="center"
                         align="center"
                         width="150"
                         :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="createDate"
                         label="创建时间"
                         header-align="center"
                         align="center"
                         width="150"
                         :show-overflow-tooltip="true"></el-table-column>
        <el-table-column :label="$t('handle')"
                         fixed="right"
                         header-align="center"
                         align="center"
                         width="150">
          <template slot-scope="scope">
            <el-button type="text"
                       size="small"
                       v-if="$hasPermission('system:sysPermission:updatePermission')"
                       @click="updateHandle(scope.row.id)">{{ $t('update') }}</el-button>
            <el-button type="text"
                       size="small"
                       class="danger"
                       v-if="$hasPermission('system:sysPermission:delPermission')"
                       @click="deleteHandle({ id: scope.row.id, msg: '删除该权限时对应权限也将删除' })">{{ $t('delete') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update ref="addOrUpdate"
                     @callBack="getDataList"></add-or-update>
      <incomingSettings ref="settingsDialog"
                     @callBack="getDataList"></incomingSettings>
    </div>
  </div>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import TableTreeColumn from '@/components/table-tree-column'
import AddOrUpdate from './menu-add-or-update'
import incomingSettings from './incoming-settings'
export default {
  mixins: [mixinViewModule],
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/system/sysPermission/list',
        deleteURL: '/system/sysPermission/delPermission'
      }
    }
  },
  components: {
    TableTreeColumn,
    AddOrUpdate,
    incomingSettings
  },
  methods: {
    updateHandle (id) {
      this.openDialog('addOrUpdate', { id, list: this.dataList })
    },
    incomingSettings () {
      this.openDialog('settingsDialog')
    }
  }
}
</script>
<style scoped lang="scss"></style>
